<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>雷达图</title>
        <style>
            html,
            body {
                margin: 0;
            }

            #canvas {
                display: block;
                margin: auto;
                border: 1px solid #999;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="800" height="800"></canvas>
    </body>
    <script type="module">
        import {Create} from '../dist/main.js';
        const canvas = new Create('canvas', {
            background: '#000'
        });

        function drawRadar() {
            canvas.clearRect(0, 0, 800, 800);
            canvas.setCanvasBackground('#000');

            canvas.ctx.save();
            canvas.setStartPoint(400, 400);
            // 画一个最大的圆
            canvas.drawCircle({x: 0, y: 0}, 220, {
                strokeColor: 'green',
                lineWidth: 4
            });
            canvas.drawCircle({x: 0, y: 0}, 190, {
                strokeColor: '#00800080',
                lineWidth: 2
            });

            // 画分割线
            canvas.ctx.save();
            for (let i = 0; i < 20; i++) {
                const x = 220 * Math.cos((i * Math.PI) / 8);
                const y = 220 * Math.sin((i * Math.PI) / 8);
                canvas.drawLine(
                    {x: 0, y: 0},
                    {x, y},
                    {
                        isLineDash: !Boolean(i % 2),
                        strokeStyle: i % 2 === 0 ? 'green' : '#00800080'
                    }
                );
            }

            canvas.ctx.restore();

            // 同心圆
            canvas.drawCircle({x: 0, y: 0}, 140, {
                strokeColor: 'green',
                lineWidth: 2
            });
            canvas.drawCircle({x: 0, y: 0}, 60, {
                strokeColor: 'green',
                lineWidth: 2
            });

            // 开始绘制扇形
            let startAngle = angle * Math.PI;
            let endAngle = angle * Math.PI + Math.PI / 180;
            for (let i = 0; i < 50; i++) {
                canvas.ctx.save();
                canvas.ctx.beginPath();
                // 这里我不晓得为什么会是需要设置落笔点到这里
                // 2022年03月02日17:31:36 这里设置绘制落笔点到初始位，不然在页面上无法展示扫描扇形
                canvas.ctx.moveTo(0, 0);
                canvas.ctx.fillStyle = `rgba(0, 128, 0, ${i / 50})`;
                canvas.ctx.arc(0, 0, 220, startAngle, endAngle);
                canvas.ctx.closePath();
                canvas.ctx.fill();
                canvas.ctx.restore();

                startAngle = endAngle;
                endAngle += Math.PI / 180;
            }

            canvas.ctx.restore();
            if (angle === 2) {
                angle = 0;
            }
            // 设置扫描的旋转速度，数值越大速度越快
            angle += 0.005;
            requestAnimationFrame(drawRadar);
        }

        let angle = 0;

        drawRadar();
    </script>
</html>
